<template>
  <div id="orderWaveCreation">
    <!-- <v-tableTitle :title="$t('wave.orderwavecreate')"></v-tableTitle> -->
    <h5>{{ $t('wave.orderwavecreate') }}</h5>
    <el-button icon="el-icon-refresh-right" class="refresh">
      <span v-show="show" @click="getCode" class="getCode">{{ $t('common.refresh') }}</span>
      <span v-show="!show" class="count">{{ count }}s</span>
    </el-button>
    <hr>
    <div class="info-body" :style="{ height: height + 'px' }">
      <div class="left">
        <div class="order">
          <div class="creation-title">
            <span>{{ $t('wave.ordersum') }}</span>
            <router-link :to="{ name: 'waveplanpanel' }">
              <el-button type="text">{{ $t('wave.addwaveplan') }}</el-button>
            </router-link>
          </div>
          <div class="wait">
            <div>
              <p style="color:#1890ff;font-size:2em">{{ waitwaveqty }}</p>
              <p>{{ $t('wave.waitorderwave') }}</p>
            </div>
            <div class="half">
              <p>
                <span>{{ $t('wave.inwaveplan') }}</span>
                <span>{{ waveplanqty }}</span>
              </p>
              <p>
                <span>{{ $t('wave.outwaveplan') }}</span>
                <span style="color:#f7a986;font-size:2em">{{ nowaveplanqty }}</span>
              </p>
            </div>
          </div>
          <div class="wait-clear">
            <div>
              <p style="color:#000;font-size:2em">{{ waitshipqty }}</p>
              <p>{{ $t('wave.waitshiporder') }}</p>
            </div>
            <div class="half">
              <p>
                <span>{{ $t('wave.waitwaveorder') }}</span>
                <span>{{ waitwaveqty }}</span>
              </p>
              <p>
                <span>{{ $t('wave.waveordered') }}</span>
                <span>{{ waveqty }}</span>
              </p>
            </div>
          </div>
          <div class="clear">
            <div>
              <p style="color:#000;font-size:2em">{{ shipqty }}</p>
              <p>{{ $t('wave.todayoutorder') }}</p>
            </div>
            <div class="half">
              <p>
                <span>{{ $t('wave.wavewaitorder') }}</span>
                <span style="color:#f7a986;font-size:2em">{{ wavereplenishmentqty }}</span>
              </p>
            </div>
          </div>
        </div>
        <div class="wave-time">
          <el-table ref="waveTimeTable" :data="tableData" @current-change="handleCurrentChangeWaveTime"
            style="width: 100%" :height="height - 320 + 'px'">
            <el-table-column :label="$t('app.index')" type="index" width="50">
            </el-table-column>
            <el-table-column property="wavekey" :label="$t('ex.wavekey')" width="120" align="center">
              <template slot-scope="scope">
                <a @click="goDtls(scope.row)" style="color:#409eff">{{ scope.row.wavekey }}</a>
              </template>
            </el-table-column>
            <el-table-column property="orderline" :label="$t('out.ordernumber')" align="center"> </el-table-column>
            <el-table-column property="status" :label="$t('common.status')" align="center"> </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="right">
        <div class="wave-strategy-distribution">
          <div class="creation-title">
            <span>{{ $t('wave.wavestrdis') }}</span>
            <div>
              <el-select v-model="strategy_code" @change="changeStrategyCode">
                <el-option v-for="(item, index) in strategyList" :key="index" :label="item.groupname" :value="item.id">
                </el-option>
              </el-select>
              <el-button @click="goStrategyNew">+</el-button>
            </div>
          </div>
          <ve-histogram :data="rowData" :settings="chartsSettings" :legend="{show:false}" ref="echarts" :width="'100%'" :grid="{top:20,bottom:0}"
            :height="height / 2 - 40 + 'px'" :yAxis="{minInterval: 1}">
          </ve-histogram>
        </div>
        <div class="wave-plan-smaintenance">
          <el-table ref="planTable" :data="tableDataPlan" @current-change="handleCurrentChangePlan" style="width: 100%">
            <el-table-column property="sort_num" :label="$t('app.index')" width="50" align="center">
            </el-table-column>
            <el-table-column property="filtername" :label="$t('wave.waveStrategyName')" min-width="120" align="center">
              <template slot-scope="scope">
                <router-link :to="{ path: 'outWaveStrategyGroup' }" style="color:#409eff">
                  {{ scope.row.filtername }}</router-link>
              </template>
            </el-table-column>
            <el-table-column property="num" :label="$t('wave.picktype')" align="center"> </el-table-column>
            <el-table-column property="ordernumber" :label="$t('out.ordernumber')" align="center"> </el-table-column>
            <el-table-column property="skunumber" :label="$t('wave.skunumber')" align="center"> </el-table-column>
            <el-table-column :label="$t('config.activityStatus')" align="center">
              <template slot-scope="scope">
                <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">{{
                  $t('out.createwave')
                }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TableTitle from "@/components/commons/TableTitle";
import { queryByWaveStrategyGroup, queryByWaveStrategyGroupDefault, queryOrderStatistics, queryWaveList, queryStrategyList } from "@/api/business/wave"
export default {
  name: "orderWaveCreation",
  data() {
    this.chartsSettings = {
      labelMap: { value: this.$t('out.ordernumber') }
    }
    return {
      show: true,
      count: '',
      timer: null,
      height: 0,
      tableDataPlan: [],
      tableData: [
        { code: 1, num: "1", type: 1 },
        { code: 1, num: "1", type: 1 },
        { code: 1, num: "1", type: 1 },
        { code: 1, num: "1", type: 1 },
        { code: 1, num: "1", type: 1 },
        { code: 1, num: "1", type: 1 },
        { code: 1, num: "1", type: 1 },
        { code: 1, num: "1", type: 1 },
        { code: 1, num: "1", type: 1 },
        { code: 1, num: "1", type: 1 },
        { code: 1, num: "1", type: 1 },
        { code: 1, num: "1", type: 1 },
        { code: 1, num: "1", type: 1 },
        { code: 1, num: "1", type: 1 },
        { code: 1, num: "1", type: 1 },
        { code: 1, num: "1", type: 1 },
      ],
      rowData: {
        columns: ['name', "value"],
        rows: [],

      },
      strategy_code: "",
      /**待波次订单*/
      waitwaveqty: 0,
      /**待出货订单*/
      waitshipqty: 0,
      /**出货订单*/
      shipqty: 0,
      /**波次计划内订单*/
      waveplanqty: 0,
      /**波次计划外订单*/
      nowaveplanqty: 0,
      /**已波次订单*/
      waveqty: 0,
      /**波次待补货订单*/
      wavereplenishmentqty: 0,
      strategyList: []
    }
  },
  components: {
    "v-tableTitle": TableTitle,
  },
  created() {
    this.getRightTopData();
  },
  mounted() {
    this.height = this.getHeight(window, -15);
    this.getLeftTopData();
    this.getLeftBottomData();
    this.getRightBottomData();
  },
  methods: {
    handleCurrentChangeWaveTime() { },
    handleCurrentChangePlan() { },
    getCode() {
      this.getRightTopData();
      this.getLeftTopData();
      this.getLeftBottomData();
      this.getRightBottomData();
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          }
          else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }
    },
    getLeftTopData() {
      queryOrderStatistics({}).then(res => {
          this.waitwaveqty = res.bean.waitwaveqty;
          this.waitshipqty = res.bean.waitshipqty;
          this.shipqty = res.bean.shipqty;
          this.waveplanqty = res.bean.waveplanqty;
          this.nowaveplanqty = res.bean.nowaveplanqty;
          this.waveqty = res.bean.waveqty;
          this.wavereplenishmentqty = res.bean.wavereplenishmentqty;
        
      })
    },
    getRightTopData() {
      queryByWaveStrategyGroup({}).then(res => {
          let arr = [];
          res.bean.strlist.forEach((item, index) => {
            arr.push({ name: item, value: res.bean.numberlist[index] });
          })
          this.rowData.rows = arr;
          this.$nextTick(() => {
            this.$refs['echarts'].echarts.resize();
          })
        
      })
      queryStrategyList({}).then(res => {
          this.strategyList = res.list;
          this.strategyList.forEach(item => {
            if (item.isdefault === 1) {
              this.strategy_code = item.id;
            }
          })
        
      })
    },
    getLeftBottomData() {
      queryWaveList({}).then(res => {
          this.tableData = res.list;
        
      })
    },
    getRightBottomData() {
      queryByWaveStrategyGroupDefault({}).then(res => {
          this.tableDataPlan = res.list;
        
      })

    },
    handleEdit(index, data) {
      this.$api.post(`/wpFilterCreateWave/${data.filterid}/${data.rtxwavetype}/${data.rtxexternaltype}/` + 'savefilter', {}).then(res => {
        
          this.$message.success(res.returnMgr);
        
      })
    },
    goDtls(data) {
      this.$store.commit("setRouteData", data);
      this.$router.push({ name: 'wavemgmtDeawer' });
    },
    goStrategyNew() {
      this.$store.commit("setNewFlag", true);
      this.$router.push({ name: 'outWaveStrategyGroupDeawer' });
    },
    changeStrategyCode(data) {
      queryByWaveStrategyGroup({ id: data }).then(res => {
          let arr = [];
          res.bean.strlist.forEach((item, index) => {
            arr.push({ name: item, value: res.bean.numberlist[index] });
          })
          this.rowData.rows = arr;
          this.$nextTick(() => {
            this.$refs['echarts'].echarts.resize();
          })
        
      })
    }
  },
};
</script>

<style lang="scss" scoped>
#orderWaveCreation {
  height: 100%;
  overflow: hidden;
  position: relative;
  h5{
    margin: 0;
    background: #fff;
    padding: 8px;
  }
  &>div {
    background-color: #fff;
  }

  .refresh {
    position: absolute;
    top: 2px;
    right: 8px;
  }

  .info-body {
    overflow: hidden;

    .left,
    .right {
      height: 100%;
    }
    .creation-title {
      width: 100%;
      display: flex;
      justify-content: space-between;
      span{
        font-weight: 600;
        font-size: 14px;
        padding-left: 1em;
      }
    }

    .left {
      width: 500px;
      border-right: 1px solid rgba(0, 0, 0, .1);

      &>div {
        width: 100%;
      }

      .order {
        height: 310px;
        background-color: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
        padding-top: 6px;

        .wait,
        .wait-clear,
        .clear {
          width: 100%;
          margin-top: 10px;
          overflow: hidden;
          div {
            width: 60%;
            margin: 0;
            display: inline-block;
            padding: 6px 32px;

            &:nth-child(1) {
              border-right: 1px #d5d5d5 solid;
              width: 40%;
              text-align: center;
            }

            p {
              margin: 0;
            }

            &.half {
              p {
                display: flex;
                justify-content: space-between;
                margin-bottom: 8px;
                align-items: center;
              }
            }
          }
        }
      }

      .wave-time {
        height: calc(100% - 320px);
      }
    }

    .right {
      width: calc(100% - 500px);

      .wave-strategy-distribution {
        height: 50%;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
        padding-top: 6px;

        .creation-title {
          &>div {
            width: 240px;

            .el-select {
              display: inline-block;
              width: 180px;
            }

            .el-button {
              display: inline-block;
              width: 50px;
              min-width: 50px;
            }
          }


        }
      }

      .wave-plan-smaintenance {
        height: calc(50% - 10px);
      }
    }
  }
}
</style>